<template>
  <div class="login w-image-fit w-flex-center" :style="bgImg">
    <div class="box">
      <h3 class="title">登录</h3>
      <i-form ref="IForm" :label-width="50" :rules="ruleValidate">
        <i-form-item prop="user" label="账号">
          <i-input type="text" :value.sync="fromModel.user" placeholder="请输入账号"/>
        </i-form-item>
        <i-form-item prop="pass" label="密码">
          <i-input type="password" :value.sync="fromModel.pass" placeholder="请输入密码"/>
        </i-form-item>
        <i-form-item>
          <i-button type="primary" long @click="loginBtnClick">登录</i-button>
          <a href="/" class="w-float-right to-home">跳转至主页</a>
        </i-form-item>
      </i-form>
    </div>
  </div>
</template>

<script lang='ts'>

import { Vue, Component, Inject } from 'vue-property-decorator';
import WPopView from '@/utils/popView'
@Component({})
export default class App extends Vue {
  @Inject()
  private bgImage!: (
    url: string,
    style?: CSSStyleDeclaration,
  ) => CSSStyleDeclaration;

  /**
   * 校验数据
   */
  private ruleValidate = {
    user: [
      { required: true, message: '账号不能为空', trigger: 'blur' },
      { type: 'string', min: 4, message: '不能少于4个字', trigger: 'blur' },
      { type: 'string', min: 20, message: '不能少于20个字', trigger: 'blur' }],
    pass: [
      { required: true, message: '账号不能为空', trigger: 'blur' },
      { type: 'string', min: 6, message: '不能少于6个字', trigger: 'blur' },
      { type: 'string', min: 20, message: '不能少于20个字', trigger: 'blur' }],
  }

  /**
   * 输入框数据
   */
  private fromModel = {
    user: '',
    pass: '',
  }

  /**
   * 获取随机的背景图片
   */
  get bgImg() {
    const num = Math.floor(Math.random() * 10)
    return this.bgImage(`https://cdn.wangyabin.top/wallpaper/${num}.jpg`)
  }

  /**
   * 登录按钮点击
   */
  private loginBtnClick() {
    /* tslint:disable:no-string-literal */
    (this.$refs['IForm'] as any).validate((valid: boolean) => {
      if (valid) {
        // this.$store.commit()
        WPopView.msgSuccess('提交成功')
      }
    })
  }
}

</script>

<style lang="scss">
  .login {
    height: 100vh;
    >.box {
      width: 400px;
      background-color: rgba(255, 255, 255, .8);
      border-radius: 5px;
      padding: 20px 20px 0 20px;
      >.title {
        text-align: center;
        font-size: 30px;
        line-height: 50px;
      }
      .to-home {
        color: #999;
      }
      .to-home:hover {
        color: #333;
      }
    }
  }
</style>
